<!DOCTYPE html>
<html>
<head>
    <!--Title-->
    <title>Flickerplate Example</title>
	
	<!--Basic page styles-->
	<style>
	html {
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		background-color: #fff;
		font-weight: 300;
	}
	body {
		margin: 0px;
		padding: 0px;
	}
	.documentation {
		width: 1100px;
		margin: 0px auto;
		padding: 100px 0px;
	}
	.documentation h3, p {
		text-align: center;
	}
	.documentation h3 {
		margin: 0px 0px 20px 0px;
		font-weight: 300;
		font-size: 2em;
	}
	a, a:visited {
		color: #E54028;
		text-decoration: none;
	}
	a:hover {
		color: #c22d18;
		text-decoration: underline;  
		cursor: pointer;
	}
	</style>
	
	<!--Required libraries-->
    <script src="js/min/jquery-v1.10.2.min.js" type="text/javascript"></script>
    <script src="js/min/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
    <script src="js/min/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>

    <!--Include flickerplate-->
	<link href="css/flickerplate.css"  type="text/css" rel="stylesheet">
    <script src="js/flickerplate.js" type="text/javascript"></script>
	
	<!--Execute flickerplate-->
	<script>
	$(document).ready(function(){
		
		$('.flicker-example').flicker();
	});
	</script>

</head>
<body>
	
	<!--Basic example-->
	<div class="flicker-example" data-block-text="false">
		
		<ul>
			
			<li data-background="img/field.jpg">
				<div class="flick-title">Flickerplate Is Working</div>
				<div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all.</div>
			</li>
			
			<li data-background="img/forest.jpg">
				<div class="flick-title">Editable via Javascript or CSS</div>
				<div class="flick-sub-text">Take a look at the extensive documentation to see how you can change the settings in multiple ways.</div>
			</li>
			
			<li data-background="img/frozen-water.jpg">
				<div class="flick-title">Touch Enabled Through the jQuery Finger Library</div>
				<div class="flick-sub-text">jQuery Finger is a great touch library that has been included as part of the Flickerplate package.</div>
			</li>
			
		</ul>
		
	</div>
	
		
	<!--Documentation link-->
	<div class="documentation">
		
		<h3>Read The Documentation</h3>
		<p>There are a lot of options for editing Flickerplate so it's worthwhile getting up to speed. <a href="http://getwebplate.com/plugins/flickerplate">Click here</a> for more information.</p>
	
	</div>
	
</body>
</html>